<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 自己练习 </title>
</head>
<body>
    <div id="app">
<!--        <form action="/1.php" v-on:submit.prevent="onSubmit">-->
        <form action="/1.php" @submit.prevent="onSubmit">
            用户名：<input type="text" v-model="userName"> <br/>
            密码：<input type="text" v-model="passWord">  <br/>
            性别：<input type="radio" v-model="sex" value="0">  女
                 <input type="radio" v-model="sex" value="1">  男 <br/>
            爱好：<input type="checkbox" v-model="checkedNames" value="1"> 篮球
                 <input type="checkbox" v-model="checkedNames" value="2"> 足球
                 <input type="checkbox" v-model="checkedNames" value="3"> 兵乓 <br/>
            城市：<select v-model="cityId" >
                    <!-- 内联对象字面量 -->
                    <option v-for="(value,key) in selecteds" :key="key" :value="value.id">
                        {{value.name}}
                    </option>
                </select> <br/>
            介绍：<textarea v-model="contents" rows="5" ></textarea> <br/>
            <input type="submit" value="提 交">
        </form>
    </div>
</body>
</html>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
    el:"#app",
    data: {
        userName:"",
        passWord:"",
        sex:1,
        checkedNames:['2'],
        selecteds:[{id:1,name:"北京"},{id:2,name:"上海"},{id:3,name:"长沙"}],
        cityId:3,
        contents:"",
    },
    methods:{
        onSubmit(){
            console.log(
                'userName:' + this.userName ,
                'passWord:' + this.passWord,
                'sex:' + this.sex,
                'checkedNames:' + this.checkedNames,
                'cityId:' + this.cityId,
                'contents:' + this.contents,
            )
        }
    }
})
</script>